﻿Date.prototype.format = function (fmt) { 
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}


//
class RTable extends React.Component {

	constructor(props) {
		super(props);
		//初始数据
		this.products = [];
		this.state = {
			datas:[],
			totalSize: 0,
			sizePerPage: 10,
			page: 1,
			searchData:{
				outThirdCustAcctId:"",  //付款方
				inThirdCustAcctId:"",  //收款方
				orderNo:"", //订单号
				paySerialNo:"",//支付指令号
				begin:"",//开始日期
				end:"",//结束日期
				"_csrf":$("input[name=_csrf]").val(),
			}
		}


		//数据行选中配置
		this.selectRowProp  = {
			mode: 'radio',
			onSelect: this.onRowSelect,
			onSelectAll: this.onSelectAll
		}

		this.ajaxRequestData = this.ajaxRequestData.bind(this);
		this.handlePageChange = this.handlePageChange.bind(this);
		this.handleSizePerPageChange = this.handleSizePerPageChange.bind(this);

	}
	/*******************************************************************/
	//DOM加载完成
	componentDidMount(){
		//请求第1页数据，且每页显示5条
		this.ajaxRequestData();
	}
	/*******************************************************************/
	ajaxRequestData(searchData = this.state.searchData, page = this.state.page, sizePerPage = this.state.sizePerPage) {
		//过滤查找条件
		this.setState({
			searchData:searchData
		});

		$.ajax({
			url:"payInfoList",
			data:{
				outThirdCustAcctId:searchData.outThirdCustAcctId,  //付款方
				inThirdCustAcctId:searchData.inThirdCustAcctId,  //收款方
				orderNo:searchData.orderNo, //订单号
				paySerialNo:searchData.paySerialNo,//支付指令号
				begin:searchData.begin,//开始日期
				end:searchData.end,//结束日期
				"_csrf":$("input[name=_csrf]").val(),
				page:page-1,
				sizePerPage:sizePerPage
			},
			method:"POST",
			success:function(str,msg,response){
				if(response.statusText=="success"){
					var result = JSON.parse(response.responseText);
					this.setState({
						datas: result.content,
						totalSize: result.totalElements,
						page:result.number+1,
						sizePerPage:result.size
					});

				}
			}.bind(this),
			error:function(str,msg,response){
			}.bind(this)
		});

	}
	/*******************************************************************/

	//分页数量选项事件
	handleSizePerPageChange(sizePerPage){
		this.ajaxRequestData(this.state.searchData, 1, sizePerPage);
	}

	//分页事件
	handlePageChange(page, sizePerPage){
		this.ajaxRequestData(this.state.searchData, page,sizePerPage);
	}

	/*******************************************************************/
	//选中行
	onRowSelect = (row, isSelected) =>{
		var rowArr = [];
		if(isSelected) {
			rowArr.push(row.id);
		}
	}
	onSelectAll = (isSelected, currentDisplayAndSelectedData) =>{

	}

	/*******************************************************************/
	//外部模态窗体表单保存
	externalModalOnSave	= (object) =>{
		alert("添加"+object)
		
		
	}
	//自定义添加按钮点击事件
	handleInsertButtonClick = (onClick) => {
		//console.log(onClick,this);
		showExternalModalForm();
		//onClick(); //弹出自带模态窗体
	}
	//自定义添加按钮
	createCustomInsertButton =(onClick) =>{
		return (
			<button className="btn btn-primary" onClick={ () => this.handleInsertButtonClick(onClick) }>+添加</button>
			//<button className="btn btn-primary" onClick={ openModal }>+添加</button>
		);
	}

	//自定义删除按钮点击事件
	handleDeleteButtonClick = (onClick) => {
		alert("删除id:"+this.state.selectRows)
	}
	//自定义删除按钮
	createCustomDeleteButton = (onClick) => {
		return (
			""
			//<button className="btn btn-danger" onClick={ onBtnClick }>-删除</button>
		);
	}
	/*******************************************************************/
	//过滤按钮事件
	handleBtnClick = (evt) =>{
		var value = evt.target.innerHTML;
	//	this.refs.filterName.applyFilter(value);
		alert("过滤Name:"+value)
	}

	//过滤下拉框事件
	handleSelectChange = (evt) =>{
		var value = evt.target.options[evt.target.options.selectedIndex].value;
		//this.refs.filterName.applyFilter(value);

		alert("过滤Name:"+value)
	}

	/*******************************************************************/
	render() {

	//配置
	const tableOptions = {
		noDataText: '暂无可用数据',

		page: this.state.page,		//当前第几页
		sizePerPage: this.state.sizePerPage,	//每页显示几条
		onPageChange: this.handlePageChange,  //分页事件
		onSizePerPageList: this.handleSizePerPageChange, //分页下拉事件

		sizePerPageList: [
			{text: '5', value: 5},
			{text: '10', value: 10 },
			{text:'所有', value:this.products.length}
		],				//分页数量选项
		sizePerPage: this.state.sizePerPage,	//每页显示条数
		pageStartIndex: this.state.currentPage, //	分页开始索引
		paginationSize: 3,	//分页数字按钮个数
		prePage: '上一页',
		nextPage: '下一页',
		firstPage: '首页',
		lastPage: '尾页'
		//,insertBtn: this.createCustomInsertButton		//自定义添加按钮
		//,deleteBtn: this.createCustomDeleteButton		//自定义删除按钮
		//,insertModalBody: this.createCustomModalBody	//自定义模态窗窗体
		//,insertModalHeader: this.createCustomModalHeader	//自定义模态窗标题
		//,onAddRow: this.onAddNewRow	//远程添加新数据
		//,onDeleteRow: this.onDeleteRow	//远程删除数据
	}

		return (

				<BootstrapTable data={ this.state.datas }
								remote={true}
								striped hover

								fetchInfo={ { dataTotalSize: this.state.totalSize } }

								options={ tableOptions }
								pagination={ true }
								insertRow={false}
								deleteRow={ false }
								//selectRow={ this.selectRowProp }
								>
				<TableHeaderColumn dataField='funcFlag' width="120" dataFormat={function(cell,row){return $("#funcFlag").data(cell.toString())}}>操作类型 </TableHeaderColumn>
				<TableHeaderColumn dataField='inThirdCustId' width="160" dataFormat={InCustInfo}>收取账号</TableHeaderColumn>
				<TableHeaderColumn dataField='outThirdCustId' width="160"  dataFormat={outCustInfo}>支付账号 </TableHeaderColumn>
				<TableHeaderColumn dataField='tranAmount' width="100" dataFormat={function(cell,row){return Number(cell).toFixed(2)} }>支付金额 </TableHeaderColumn>
				<TableHeaderColumn dataField='handFee' width="100" dataFormat={function(cell,row){return Number(cell).toFixed(2)} }>手续费</TableHeaderColumn>
				<TableHeaderColumn dataField='paySerialNo' width="200">支付指令号 </TableHeaderColumn>
				<TableHeaderColumn dataField='thirdHtCont'>说明 </TableHeaderColumn>
				<TableHeaderColumn dataField='tranDate' dataFormat={formatDate}>时间 </TableHeaderColumn>
				<TableHeaderColumn dataField='status' dataFormat={function(cell,row){return $("#status").data(cell.toString())}}>当前状态 </TableHeaderColumn>
				<TableHeaderColumn dataField='payId' width="200" isKey={true} dataFormat={customFormatterOperation}>操作 </TableHeaderColumn>
				</BootstrapTable>

		);
	}
}
//	var myRTable = ReactDOM.render(<RTable url="" />,document.getElementById("component-table"));

function InCustInfo(cell,row){
	return cell+"<br>"+row.inCustName;
}

function outCustInfo(cell,row){
	return cell+"<br>"+row.outCustName;
}

function customFormatterOperation(cell,row){
	//已发送 未复核
	if (row.status==1){
		return "<a href='javascript:payAgent("+cell+")'>代理</a> <a href='javascript:payForce("+cell+")'>强制</a> <a href='javascript:payCancel("+cell+")'>撤销</a>";
	}
	//已经创建但银行未接受的付款请求可以删除
	if (row.status==0){
		return "<a href='javascript:delSettPay("+cell+")'>删除</a>";
	}
	if ((row.status==2||row.status==4)&&row.funcFlag==1){
		return "<a href='javascript:unFreezeSettPay("+cell+")'>释放</a>";
	}
}

$().ready(function(){
	//订单状态 数据字典
	$("body").append("<div id=\"status\">");
	$("#status").data("0","初始创建");
	$("#status").data("1","发送成功");
	$("#status").data("2","银行复核成功");
	$("#status").data("3","拒绝复核");
	$("#status").data("4","强制支付完成");
	$("#status").data("5","资金已经释放");
	$("#status").data("6","支付已撤销");
	
	$("body").append("<div id=\"funcFlag\">");
	$("#funcFlag").data("1","申请支付");
	$("#funcFlag").data("2","撤销支付");
});


function formatDate(cell,row){
	if (cell){
		return new Date(cell).format("yyyy-MM-dd hh:mm:ss");
	}else{
		return "";
	}
}

//代理完成支付操作
function payAgent(payId){
	var callback=function(result){
		if (result.success){
			esteel_paylist.paylist_table.ajaxRequestData();
		}else{
			alert(result.rspMsg);
		}
	}
	$("#payId").val(payId);
	$.post("payAgent",$("#pay-form").serialize(),callback,"json");
}

//强制完成支付操作
function payForce(payId){
	var callback=function(result){
		if (result.success){
			esteel_paylist.paylist_table.ajaxRequestData();
		}else{
			alert(result.rspMsg);
		}
	}
	$("#payId").val(payId);
	$.post("payForce",$("#pay-form").serialize(),callback,"json");
}

//撤销支付
function payCancel(payId){
	var callback=function(result){
		if (result.success){
			esteel_paylist.paylist_table.ajaxRequestData();
		}else{
			alert(result.rspMsg);
		}
	}
	$("#payId").val(payId);
	$.post("payCancel",$("#pay-form").serialize(),callback,"json");

}

//删除尚未发动成功的支付请求
function delSettPay(id){
	$.ajax({
		url:"delSettPay?payId="+arguments[0],
		dataType:"html",
		success: function(content){
			esteel_paylist.paylist_table.ajaxRequestData();
		   }
	});
}

//解冻交易成功的付款
function unFreezeSettPay(payId){
	var callback=function(result){
		if (result.success){
			esteel_paylist.paylist_table.ajaxRequestData();
		}else{
			alert(result.rspMsg);
		}
	}
	$("#payId").val(payId);
	$.post("unFreezeSettPay",$("#pay-form").serialize(),callback,"json");

}


